<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>WebTools-Web开发者素材</title>
    <meta name="keywords" content="vue,react,组件，插件,模板，echarts,数据可视化,微前端,后台管理系统,免费下载">
    <meta name="description" content="提供vue/react/组件,插件,echarts数据可视化、后台管理系统模板免费下载,微前端解决方案">
    <link rel="icon" href="../../img/logo.png">
    <link rel="stylesheet" href="Odometer/Odometer.css">
    <link rel="stylesheet" href="css.css">
    <link href='http://cdn.webfont.youziku.com/webfonts/nomal/89866/19673/5cee39a7f629d80118859262.css' rel='stylesheet' type='text/css' />
    <style type="text/css">
        .OdometerBg  .number-animate  .number-animate-dom,
        .OdometerBg  .number-animate  .number-animate-dot{width: 50px;}
        .OdometerBg  .number-animate  .number-animate-dot span{
            color: #fff;
            border-left: 1px solid #fff;
        }
        .OdometerBg  .number-animate  .number-animate-dom{
            color: #fff;}
    </style>
</head>
<body>
<div class="container">
    <div class="head">
        <div class="province">江西省</div>
        <div class="inner">
            <li class="logo"><img src="images/logo.svg" alt=""></li>
            <li class="name css19a7ba7d4d15f0a">北斗自由流收费管理平台</li>
        </div>
        <li class="machineDate" id="machineDate"></li>
    </div>
    <div class="slide">
        <div class="column1">
            <div class="inner clearfix">
                <div class="content">
                    <div class="item1">
                        <li class="title" style="position: absolute;top: 0;left: 0">在线统计</li>
                        <div class="Odometer OdometerBg"></div>
                        <li class="unit">辆</li>
                    </div>
                    <div class="item2">
                        <li class="title">在线流量/金额</li>
                        <div class="onlineStatis">
                            <div>
                                <ul>
                                    <li class="name">今日流量</li>
                                    <li class="value"><span>1200</span><span>辆</span></li>
                                </ul>
                                <ul>
                                    <li class="name">今日金额</li>
                                    <li class="value"><span>124507</span><span>元</span></li>
                                </ul>
                            </div>

                        </div>

                    </div>
                    <div class="item3">
                        <ul class="tabbar">
                            <div class="inner">
                                <li class="active">在线车辆</li>
                                <li>实时榜单</li>
                            </div>
                        </ul>
                       
                        <div class="tab" style="display: block">
                            <ul class="listTitle">
                                <li>车牌号</li>
                                <li>车量类型</li>
                                <li>起止站点</li>
                                <li>起止时间</li>
                                <li>里程</li>
                                <li>金额</li>
                            </ul>
                            <div class="listContent" id="test">
                                <div class="itemwrap">
                                    <ul>
                                        <li>京P67890</li>
                                        <li>客2</li>
                                        <li>济广高速  </li>
                                        <li>龙虎山</li>
                                        <li>14:12:23</li>
                                        <li>120</li>
                                    </ul>
                                    <ul>
                                        <li>京P67890</li>
                                        <li>客2</li>
                                        <li>济广高速  </li>
                                        <li>龙虎山</li>
                                        <li>14:12:23</li>
                                        <li>120</li>
                                    </ul>
                                    <ul>
                                        <li>京P67890</li>
                                        <li>客2</li>
                                        <li class="double">
                                            <span>济广高速</span>
                                            <span>济广高速</span>
                                        </li>
                                        <li>龙虎山</li>
                                        <li class="double">
                                            <span>14:12:23</span>
                                            <span>14:12:23</span>
                                        </li>
                                        <li>120</li>
                                    </ul>
                                    <ul>
                                        <li>京P67890</li>
                                        <li>客2</li>
                                        <li>济广高速  </li>
                                        <li>龙虎山</li>
                                        <li>14:12:23</li>
                                        <li>120</li>
                                    </ul>
                                    <ul>
                                        <li>京P67890</li>
                                        <li>客2</li>
                                        <li>济广高速  </li>
                                        <li>龙虎山</li>
                                        <li>14:12:23</li>
                                        <li>120</li>
                                    </ul>
                                    <ul>
                                        <li>京P67890</li>
                                        <li>客2</li>
                                        <li>济广高速  </li>
                                        <li>龙虎山</li>
                                        <li>14:12:23</li>
                                        <li>120</li>
                                    </ul>
                                    <ul>
                                        <li>京P67890</li>
                                        <li>客2</li>
                                        <li>济广高速  </li>
                                        <li>龙虎山</li>
                                        <li>14:12:23</li>
                                        <li>120</li>
                                    </ul>
                                    <ul>
                                        <li>京P67890</li>
                                        <li>客2</li>
                                        <li>济广高速  </li>
                                        <li>龙虎山</li>
                                        <li>时间</li>
                                        <li>120</li>
                                    </ul>
                                    <ul>
                                        <li>京P67890</li>
                                        <li>客2</li>
                                        <li>济广高速  </li>
                                        <li>龙虎山</li>
                                        <li>时间</li>
                                        <li>120</li>
                                    </ul>
                                    <ul>
                                        <li>京P67890</li>
                                        <li>客2</li>
                                        <li>济广高速  </li>
                                        <li>龙虎山</li>
                                        <li>14:12:23</li>
                                        <li>120</li>
                                    </ul>
                                    <ul>
                                        <li>京P67890</li>
                                        <li>客2</li>
                                        <li>济广高速  </li>
                                        <li>龙虎山</li>
                                        <li>时间</li>
                                        <li>120</li>
                                    </ul>
                                    <ul>
                                        <li>京P67890</li>
                                        <li>客2</li>
                                        <li>济广高速  </li>
                                        <li>龙虎山</li>
                                        <li>时间</li>
                                        <li>120</li>
                                    </ul>
                                    <ul>
                                        <li>京P67890</li>
                                        <li>客2</li>
                                        <li>济广高速  </li>
                                        <li>龙虎山</li>
                                        <li>14:12:23</li>
                                        <li>120</li>
                                    </ul>
                                    <ul>
                                        <li>京P67890</li>
                                        <li>客2</li>
                                        <li>济广高速  </li>
                                        <li>龙虎山</li>
                                        <li>时间</li>
                                        <li>120</li>
                                    </ul>
                                    <ul>
                                        <li>京P67890</li>
                                        <li>客2</li>
                                        <li>济广高速  </li>
                                        <li>龙虎山</li>
                                        <li>时间</li>
                                        <li>120</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="tab">
                            <div class="rank">
                                <div class="flow">
                                    <ul>
                                        <li class="name">九龙山</li>
                                        <li class="power"></li>
                                        <li class="base"></li>
                                        <li class="amount"><span>0.3</span>辆</li>
                                    </ul>
                                    <ul>
                                        <li class="name">鹰潭西</li>
                                        <li class="power"></li>
                                        <li class="base"></li>
                                        <li class="amount"><span>10.0</span>辆</li>
                                    </ul>
                                    <ul>
                                        <li class="name">九龙山</li>
                                        <li class="power"></li>
                                        <li class="base"></li>
                                        <li class="amount"><span>9.5</span>辆</li>
                                    </ul>
                                    <ul>
                                        <li class="name">九龙山</li>
                                        <li class="power"></li>
                                        <li class="base"></li>
                                        <li class="amount"><span>10.2</span>辆</li>
                                    </ul>
                                    <ul>
                                        <li class="name">九龙山</li>
                                        <li class="power"></li>
                                        <li class="base"></li>
                                        <li class="amount"><span>7.4</span>辆</li>
                                    </ul>
                                    <ul>
                                        <li class="name">九龙山</li>
                                        <li class="power"></li>
                                        <li class="base"></li>
                                        <li class="amount"><span>10.2</span>辆</li>
                                    </ul>
                                    <ul>
                                        <li class="name">九龙山</li>
                                        <li class="power"></li>
                                        <li class="base"></li>
                                        <li class="amount"><span>7.4</span>辆</li>
                                    </ul>
                                    <ul>
                                        <li class="name">九龙山</li>
                                        <li class="power"></li>
                                        <li class="base"></li>
                                        <li class="amount"><span>10.2</span>辆</li>
                                    </ul>
                                    <ul>
                                        <li class="name">九龙山</li>
                                        <li class="power"></li>
                                        <li class="base"></li>
                                        <li class="amount"><span>7.4</span>辆</li>
                                    </ul>
                                </div>
                                <div class="money">
                                    <ul>
                                        <li class="name">九龙山</li>
                                        <li class="power"></li>
                                        <li class="base"></li>
                                        <li class="amount"><span>10.5</span>万元</li>
                                    </ul>
                                    <ul>
                                        <li class="name">九龙山</li>
                                        <li class="power"></li>
                                        <li class="base"></li>
                                        <li class="amount"><span>7.6</span>万元</li>
                                    </ul>
                                    <ul>
                                        <li class="name">九龙山</li>
                                        <li class="power"></li>
                                        <li class="base"></li>
                                        <li class="amount"><span>5.0</span>万元</li>
                                    </ul>
                                    <ul>
                                        <li class="name">九龙山</li>
                                        <li class="power"></li>
                                        <li class="base"></li>
                                        <li class="amount"><span>5.2</span>万元</li>
                                    </ul>
                                    <ul>
                                        <li class="name">九龙山</li>
                                        <li class="power"></li>
                                        <li class="base"></li>
                                        <li class="amount"><span>4.3</span>万元</li>
                                    </ul>
                                    <ul>
                                        <li class="name">九龙山</li>
                                        <li class="power"></li>
                                        <li class="base"></li>
                                        <li class="amount"><span>5.2</span>万元</li>
                                    </ul>
                                    <ul>
                                        <li class="name">九龙山</li>
                                        <li class="power"></li>
                                        <li class="base"></li>
                                        <li class="amount"><span>4.3</span>万元</li>
                                    </ul>
                                    <ul>
                                        <li class="name">九龙山</li>
                                        <li class="power"></li>
                                        <li class="base"></li>
                                        <li class="amount"><span>5.2</span>万元</li>
                                    </ul>
                                    <ul>
                                        <li class="name">九龙山</li>
                                        <li class="power"></li>
                                        <li class="base"></li>
                                        <li class="amount"><span>4.3</span>万元</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="main">
        <div class="inner clearfix">
            <div class="multiple tab"   >
                <div class="map1" id="container1"></div>
				<ul class="back" id="back2">
                    <li class="symbol"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-back"></use></svg></li>
                    <li class="text">返回</li>
                </ul>
                <!--<div class="desc">-->
                    <!--<ul>-->
                        <!--<li class="symbol"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-type1"></use></svg></li>-->
                        <!--<li class="text">旅游包车</li>-->
                    <!--</ul>-->
                    <!--<ul>-->
                        <!--<li class="symbol"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-type2"></use></svg></li>-->
                        <!--<li class="text">班线客车</li>-->
                    <!--</ul>-->
                    <!--<ul>-->
                        <!--<li class="symbol"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-type3"></use></svg></li>-->
                        <!--<li class="text">危险品车辆</li>-->
                    <!--</ul>-->
                    <!--<ul style="margin-bottom: 0">-->
                        <!--<li class="symbol"><svg class="icon" aria-hidden="true">-->
                            <!--<use xlink:href="#icon-type4"></use>-->
                        <!--</svg></li>-->
                        <!--<li class="text">货运车辆</li>-->
                    <!--</ul>-->
                <!--</div>-->
                <div class="infoDetail">
                    <div class="inner">
                        <ul class="title">
                            <li class="">车牌号</li>
                            <li class="">车型</li>
                            <li class="">收费站</li>
                            <li class="">时间</li>
                            <li>路段</li>
                            <li class="">收费里程</li>
                            <li>收费金额</li>
                        </ul>
                        <div class="list clearfix">
                            <ul>
                                <li>赣B45679</li>
                                <li>客2</li>
                                <li>九龙湖</li>
                                <li>9月34日 23：12：40</li>
                                <li>济广告高速</li>
                                <li>120km</li>
                                <li>60.00</li>
                            </ul>
                            <ul>
                                <li>赣B45679</li>
                                <li>客2</li>
                                <li>九龙湖</li>
                                <li>9月34日 23：12：40</li>
                                <li>济广告高速</li>
                                <li>120km</li>
                                <li>60.00</li>
                            </ul>
                            <ul>
                                <li>赣B45679</li>
                                <li>客2</li>
                                <li>九龙湖</li>
                                <li>9月34日 23：12：40</li>
                                <li>济广告高速</li>
                                <li>120km</li>
                                <li>60.00</li>
                            </ul>
                            <ul>
                                <li>赣B45679</li>
                                <li>客2</li>
                                <li>九龙湖</li>
                                <li>9月34日 23：12：40</li>
                                <li>济广告高速</li>
                                <li>120km</li>
                                <li>60.00</li>
                            </ul>
                            <ul>
                                <li>赣B45679</li>
                                <li>客2</li>
                                <li>九龙湖</li>
                                <li>9月34日 23：12：40</li>
                                <li>济广告高速</li>
                                <li>120km</li>
                                <li>60.00</li>
                            </ul>
                            <ul>
                                <li>赣B45679</li>
                                <li>客2</li>
                                <li>九龙湖</li>
                                <li>9月34日 23：12：40</li>
                                <li>济广告高速</li>
                                <li>120km</li>
                                <li>60.00</li>
                            </ul>
                            <ul>
                                <li>赣B45679</li>
                                <li>客2</li>
                                <li>九龙湖</li>
                                <li>9月34日 23：12：40</li>
                                <li>济广告高速</li>
                                <li>120km</li>
                                <li>60.00</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div class="simple tab" style="display: block;">
				<ul class="back" id="back1">
                    <li class="symbol"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-back"></use></svg></li>
                    <li class="text">返回</li>
                </ul>
                <div class="map2" id="container2" ></div>
				 <div class="infoDetail-simple">
				    <div class="inner">
                        <div class="tags">
                            <ul>
                                <li>车牌号: <span>赣A12345</span></li>
                                <li>车型: <span>客1</span></li>
                                <li>收费里程: <span>120KM</span></li>
                                <li>收费金额: <span>65元</span></li>
                            </ul>
                        </div>
				        <ul class="title">
							<li>节点</li>
				            <li class="">收费站</li>
				            <li class="">时间</li>
				            <li>路段</li>
				        </ul>
				        <div class="list">
				            <ul>
								<li>
                                    <div class="fixWidth">
                                        <span class="symbol"><img src="images/icon-path-in.png" alt=""></span>
                                        <span class="text">入口</span>
                                    </div>
                                </li>
				                <li>九龙湖</li>
				                <li>9月34日 23：12：40</li>
				                <li>济广告高速</li>
				            </ul>
                            <ul>
                                <li>
                                    <div class="fixWidth">
                                        <span class="symbol"><img src="images/icon-path-current.png" alt=""></span>
                                        <span class="text">枢纽</span>
                                    </div>
                                </li>
                                <li>九龙湖</li>
                                <li>9月34日 23：12：40</li>
                                <li>济广告高速</li>
                            </ul>
                            <ul>
                                <li>
                                    <div class="fixWidth">
                                        <span class="symbol"><img src="images/icon-path-out.png" alt=""></span>
                                        <span class="text">出口</span>
                                    </div>
                                </li>
                                <li>九龙湖</li>
                                <li>9月34日 23：12：40</li>
                                <li>济广告高速</li>
                            </ul>
				        </div>
				    </div>
				</div>
            </div>
        </div>
    </div>
</div>
<script src="../../js/jquery.min.js"></script>
<script src="../../js/echarts/echarts.min.js"></script>
<script src="Odometer/Odometer.js"></script>
<script type="text/javascript" src='//webapi.amap.com/maps?v=1.4.14&key=d86f44f58592518cbcd2a4e4c3b7e662'></script>
<script src="//webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>
<script src="iconfont.js"></script>
<script src="main.js"></script>
</body>
</html>